import { message, Modal, Select, Table } from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import React, { PureComponent } from 'react';
import { downloadFileByUrl } from '@/utils/utils';
import enums from '../../creditPlatform/enums';
import styles from './style.less';

const { Option } = Select;

const mapStateToProps = (state: any) => ({
  electricFenceMng: state.electricFenceMng,
  common: state.common,
  loading: state.loading.effects['electricFenceMng/getFetchPage'],
});
class TaskModal extends PureComponent<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      tableLoading: false,
      curPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      taskType: 'MsCreditBusinessVehicleFenceImport',
    };
  }

  componentDidMount() {
    this.props.onRef(this);
    this.handleTableData();
  }

  handleTableData = () => {
    const { curPage, pageSize, taskType } = this.state;

    this.setState({
      tableLoading: true,
    });

    this.props.dispatch({
      type: 'electricFenceMng/getDataWithRes',
      payload: {
        url: '/mscreditbusiness/exporttask/page',
        ...{ page: curPage, size: pageSize, taskType: taskType },
      },
      callback: response => {
        if (response && response.statusCode == '0') {
          if (response.data.rows.length === 0 && response.data.pagination.current > 1) {
            this.setState(
              {
                curPage: 1,
                pageSize: 10,
              },
              () => {
                this.handleTableData();
              },
            );
          } else {
            this.setState({
              tableData: response.data.rows,
              total: response.data.pagination.total,
            });
          }
        } else {
          // message.error(response.statusMessage);
        }
        this.setState({
          tableLoading: false,
        });
      },
    });
  };

  render() {
    const { tableData, tableLoading, curPage, pageSize, total } = this.state;

    const { changeTaskModalVisible } = this.props;

    const columns = [
      {
        title: '操作时间',
        dataIndex: 'createDate',
        render: (text: any) => {
          return text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : '';
        },
      },
      {
        title: '操作类型',
        dataIndex: 'type',
        render: (text: any) => {
          let findText = enums.platformThirdType.array.find(
            (e: { value: any }) => e.value === text,
          );
          return findText ? findText.label : text;
        },
      },
      { title: '操作人', dataIndex: 'createBy' },
      {
        title: '状态',
        dataIndex: 'status',
        render: (text: any) => {
          let findText = enums.taskStatus.array.find(e => e.value === text);
          return findText ? findText.label : text;
        },
      },
      {
        title: '结果',
        dataIndex: 'url',
        render: (text: any, record: any) => {
          if (text) {
            let findText = enums.platformThirdType.array.find(
              (e: { value: any }) => e.value === record.type,
            );
            return (
              <a
                onClick={() => {
                  downloadFileByUrl(
                    text,
                    findText.title +
                      moment(record.createDate).format('YYYY-MM-DD HH:mm:ss') +
                      '.csv',
                  );
                }}
              >
                文件下载
              </a>
            );
          } else {
            return '';
          }
        },
      },
    ];

    const pagination = {
      showSizeChanger: true,
      total: total,
      current: curPage,
      pageSize: pageSize,
      showTotal: () => {
        return <span>共&nbsp;{total}&nbsp;条</span>;
      },
    };

    const tableProps = {
      columns,
      size: 'small',
      pagination,
      rowKey: 'sid',
      scroll: { x: 'max-content' },
      loading: tableLoading,
      dataSource: tableData,
      onChange: (pagination: { current: any; pageSize: any }) => {
        this.setState(
          {
            curPage: pagination.current,
            pageSize: pagination.pageSize,
          },
          () => {
            this.handleTableData();
          },
        );
      },
    };

    return (
      <Modal
        title="任务中心"
        onCancel={() => changeTaskModalVisible(false)}
        visible={true}
        footer={[]}
        width="770px"
      >
        <div className={styles.exportTaskModal}>
          <div className={styles.table}>
            <Table {...tableProps} />
          </div>
        </div>
      </Modal>
    );
  }
}
export default connect(mapStateToProps)(TaskModal);
